<template>
    <div class="musicZone">
        <div class="title">音乐专区</div>
        <ul>
            <li v-for="(v,i) in arr" :key="i"><img :src="v"></li>  
        </ul>
    </div>
</template>

<script>
export default {
    data(){
        return {
            arr:["wjmpic/yyfq1.jpg","wjmpic/yyfq2.jpg","wjmpic/yyfq3.jpg","wjmpic/yyfq4.jpg","wjmpic/yyfq5.jpg","wjmpic/yyfq6.jpg","wjmpic/yyfq7.jpg","wjmpic/yyfq8.jpg","wjmpic/yyfq9.jpg","wjmpic/yyfq10.jpg","wjmpic/yyfq11.jpg","wjmpic/yyfq12.jpg"]
        }
    }
}
</script>

<style scoped>
    .musicZone{
        width: 6.84rem;
        height: 9.7rem;
        margin: 0 auto .22rem;
    }

    .musicZone .title{
        height: .95rem;
        line-height: .28rem;
        font-size: .28rem;
        font-weight: bold;
        padding-top: .43rem;
    }

    .musicZone ul>li{
        float: left;
        width: 3.31rem;
        height: 1.28rem;
        margin-bottom: .22rem;
    }

    .musicZone ul>li img{
        width: 3.31rem;
        height: 1.28rem;
    } 

    .musicZone ul>li:nth-of-type(2n-1){
        margin-right: .22rem;
    }
</style>
